<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uuQuery - style selector</title>
<style type="text/css">@import url(../README.css);</style>
<script type="text/javascript" src="../uuQuery.js"></script>
<script type="text/javascript" src="iterator.js"></script>
<style>
.abs {
  position: absolute; top: 20em; left: 10em;
  width: 100px; height: 100px;
  background-color: gray;
}
</style>
</head>
<body>
<script>
function boot() {
  var ie = uuMeta.ie;
  var runstyle = uuMeta.runstyle;
  uuQuery(".abs").forEach(function(v) {
    var left = uuStyle.getPixel(v, "left"),
        top =  uuStyle.getPixel(v, "top"),
        height = uuStyle.getPixel(v, "height"),
        width = uuStyle.getPixel(v, "width"),
        rgba = uuColor.parse((ie ? v[runstyle]
                                 : runstyle(v, "")).backgroundColor, 1);
    v.style.left = left + "px";
    v.style.top = top + "px";
    v.style.height = height + "px";
    v.style.width = height + "px";
    v._bgcolor = rgba; // bond
    v.style.backgroundColor = uuColor.hex(rgba);
    uuStyle.setOpacity(v, 1);
  });
  var end = 0;

  (function loop() {
    uuQuery("div{opacity<=1}").forEach(function(v) {
      uuStyle.setOpacity(v, -0.01, 1);
    });

    uuQuery("div[title=ltr]{left<=400}").forEach(function(v) {
      v.style.left = (parseInt(v.style.left) + 4) + "px";
      v.style.height = (parseInt(v.style.height) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, -1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    uuQuery("div[title=rtl]{left>=0}").forEach(function(v) {
      v.style.left = (parseInt(v.style.left) - 4) + "px";
      v.style.width = (parseInt(v.style.width) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, +1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    uuQuery("div[title=utd]{top<=400}").forEach(function(v) {
      v.style.top = (parseInt(v.style.top) + 4) + "px";
      v.style.height = (parseInt(v.style.height) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, -1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    uuQuery("div[title=dtu]{top>=0}").forEach(function(v) {
      v.style.top = (parseInt(v.style.top) - 4) + "px";
      v.style.width = (parseInt(v.style.width) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, +1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    ++end < 100 && setTimeout(loop, 10);

  })();
}
</script>
<ul>
<li>Computed style operator >=</li>
<li>Computed style operator <=</li>
</ul>
<div class="abs" style="top:   0px; left:   0px; background-color: #ff0000" title="utd">absolute</div>
<div class="abs" style="top:   0px; left: 400px; background-color: #123456" title="rtl">absolute</div>
<div class="abs" style="top: 400px; left:   0px; background-color: #00ff00" title="ltr">absolute</div>
<div class="abs" style="top: 400px; left: 400px; background-color: #612345" title="dtu">absolute</div>
<pre class="eg">
&lt;div class="abs" style="top:   0px; left:   0px; background-color: #ff0000" title="utd"&gt;absolute&lt;/div&gt;
&lt;div class="abs" style="top:   0px; left: 400px; background-color: #123456" title="rtl"&gt;absolute&lt;/div&gt;
&lt;div class="abs" style="top: 400px; left:   0px; background-color: #00ff00" title="ltr"&gt;absolute&lt;/div&gt;
&lt;div class="abs" style="top: 400px; left: 400px; background-color: #612345" title="dtu"&gt;absolute&lt;/div&gt;

function boot() {
  var ie = uuMeta.ie;
  var runstyle = uuMeta.runstyle;
  uuQuery(".abs").forEach(function(v) {
    var left = uuStyle.getPixel(v, "left"),
        top =  uuStyle.getPixel(v, "top"),
        height = uuStyle.getPixel(v, "height"),
        width = uuStyle.getPixel(v, "width"),
        rgba = uuColor.parse((ie ? v[runstyle]
                                 : runstyle(v, "")).backgroundColor, 1);
    v.style.left = left + "px";
    v.style.top = top + "px";
    v.style.height = height + "px";
    v.style.width = height + "px";
    v._bgcolor = rgba; // bond
    v.style.backgroundColor = uuColor.hex(rgba);
    uuStyle.setOpacity(v, 1);
  });
  var end = 0;

  (function loop() {
    uuQuery("div{opacity&lt;=1}").forEach(function(v) {
      uuStyle.setOpacity(v, -0.01, 1);
    });

    uuQuery("div[title=ltr]{left&lt;=399}").forEach(function(v) {
      v.style.left = (parseInt(v.style.left) + 4) + "px";
      v.style.height = (parseInt(v.style.height) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, -1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    uuQuery("div[title=rtl]{left&gt;=0}").forEach(function(v) {
      v.style.left = (parseInt(v.style.left) - 4) + "px";
      v.style.width = (parseInt(v.style.width) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, +1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    uuQuery("div[title=utd]{top&lt;=399}").forEach(function(v) {
      v.style.top = (parseInt(v.style.top) + 4) + "px";
      v.style.height = (parseInt(v.style.height) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, -1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    uuQuery("div[title=dtu]{top&gt;=0}").forEach(function(v) {
      v.style.top = (parseInt(v.style.top) - 4) + "px";
      v.style.width = (parseInt(v.style.width) - 1) + "px";
      v._bgcolor = uuColor.arrange(v._bgcolor, 2, +1, 0);
      v.style.backgroundColor = uuColor.hex(v._bgcolor);
    });

    ++end &lt; 100 &amp;&amp; setTimeout(loop, 10);

  })();
}
</pre>

</body>
</html>